import { Button } from 'antd';
import { useState } from 'react';

import MyModal from '@/components/MyModal';
import { t } from '@/locales/i18n';
import { PromptTemplateItem } from '@/types/ai/type';

const PromptTemplate = ({
  title,
  templates,
  onClose,
  onSuccess,
}: {
  title: string;
  templates: PromptTemplateItem[];
  onClose: () => void;
  onSuccess: (e: PromptTemplateItem) => void;
}) => {
  const [selectTemplateTitle, setSelectTemplateTitle] = useState<PromptTemplateItem>();

  return (
    <MyModal isOpen title={title} onClose={onClose} iconSrc="prompt" minW="680px">
      <div className="h-full w-[600px] max-w-[90vw] overflow-y-auto">
        <div className="grid grid-cols-1 gap-4">
          {templates.map((item) => (
            <div
              key={item.title}
              // border={theme.borders.base}
              className={`cursor-pointer rounded-md px-2 py-2 ${
                item.title === selectTemplateTitle?.title ? 'bg-primary-700' : ''
              }`}
              onClick={() => setSelectTemplateTitle(item)}
            >
              <div className="text-gray-900" color="myGray.900">
                {t(item.title as any)}
              </div>

              <div className="whitespace-pre-wrap text-xs text-gray-600">{t(item.desc as any)}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="ml-auto mt-4 flex">
        <Button
          type="primary"
          disabled={!selectTemplateTitle}
          onClick={() => {
            if (!selectTemplateTitle) return;
            onSuccess(selectTemplateTitle);
            onClose();
          }}
        >
          {t('confirm_choice')}
        </Button>
      </div>
    </MyModal>
  );
};

export default PromptTemplate;
